import { useEffect, useRef, useCallback } from "react";
import * as echarts from "echarts";

interface RelationProps {
  id: number;
  name: string;
  value: number;
}

export default function Relation({ data }: { data: RelationProps[] }) {
  const target = useRef<HTMLDivElement>(null);

  const initEcharts = useCallback(() => {
    if (target.current) {
      const myChart = echarts.init(target.current);
      // 渲染图表
      const options = {
        // X 轴展示选项
        xAxis: {
          type: "category",
          // 根据根据服务端数据筛选
          data: data.map((item) => item.name),
          // 文字色值
          axisLabel: {
            color: "#9EB1C8",
          },
        },
        // Y 轴展示数据
        yAxis: {
          // 数据展示
          type: "value",
          // 不显示轴
          show: false,
          // 最大值（防止触顶）
          max: function (value: { max: number }) {
            // 取整
            return (value.max * 1.2).toFixed(0).toString();
          },
        },
        // echarts 网格绘制的位置，对应 上、右、下、左
        grid: {
          top: 16,
          right: 0,
          bottom: 26,
          left: -26,
          // 计算边距时，包含标签
          containLabel: true,
        },
        // 柱形图核心配置
        series: {
          // 柱形图
          type: "bar",
          // 数据筛选
          data: data.map((item) => ({
            name: item.name,
            value: item.value,
          })),
          // 每个轴的样式
          itemStyle: {
            color: "#479AD3", // 设置柱子的颜色
            borderRadius: 5, // 设置柱子的圆角
            shadowColor: "rgba(0, 0, 0, 0.3)", // 设置柱子的阴影颜色
            shadowBlur: 5, // 设置柱子的阴影模糊大小
          },
          // 柱子宽度
          barWidth: 12,
          // 文本
          label: {
            show: true,
            // 设置标签位置为右侧
            position: "top",
            // 设置标签文本颜色
            color: "#fff",
            formatter: "{c}%",
          },
        },
      };

      myChart.setOption(options);
    }
  }, [data]); // 添加 data 作为依赖

  useEffect(() => {
    initEcharts();

    const handleResize = () => {
      initEcharts();
    };

    window.addEventListener("resize", handleResize);
    const targetCurrent = target.current;
    return () => {
      window.removeEventListener("resize", handleResize);

      if (targetCurrent) {
        echarts.dispose(targetCurrent);
      }
    };
  }, [initEcharts]); // 监视 initEcharts 的变化

  return (
    <div className="h-1/3 box-border pb-4">
      <div className="text-2xl text-white">【服务资源占用比】</div>
      <div ref={target} className="w-full h-full"></div>
    </div>
  );
}
